<template>
    <div>
        <el-row :gutter='20'>
            <el-col :span='13'>
                <el-row>
                    <el-card shadow='hover' class='mgb20' style='border: none; padding: 0'>
                        <data-simpl :mode='"table"' :gamemode='true'></data-simpl>
                    </el-card>
                </el-row>
            </el-col>
            <el-col :span='11'>
                <el-row>
                    <el-card shadow='hover' class='mgb20' style='border: none; padding: 0'>
                        <sea-distance-chart :theme='"myTheme"'></sea-distance-chart>
                    </el-card>
                </el-row>
                <el-row>
                    <el-col :offset='19' :span='5'>
                        <el-card shadow='hover' class='mgb20' style='border: none; padding: 0'>
                            <router-link :to='"/dashboard"'>
                                <svg t="1656571990129" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2719" width="64" height="64"><path d="M554 849.574c0 23.365-18.635 42.307-42 42.307s-42-18.941-42-42.307V662.719c0-23.365 18.635-42.307 42-42.307v-7.051c23.365 0 42 25.993 42 49.358v186.855z" fill="#C0911F" p-id="2720"></path><path d="M893 888.5c0 17.397-14.103 31.5-31.5 31.5h-700c-17.397 0-31.5-14.103-31.5-31.5s14.103-31.5 31.5-31.5h700c17.397 0 31.5 14.103 31.5 31.5zM926 174.426C926 135.484 894.686 105 855.744 105H168.256C129.314 105 98 135.484 98 174.426V533h828V174.426zM98 630.988C98 669.931 129.314 702 168.256 702h687.488C894.686 702 926 669.931 926 630.988V596H98v34.988z" fill="#C0911F" p-id="2721"></path></svg>
                            </router-link>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <operator-guide></operator-guide>
    </div>
</template>


<script>
import CompassBoard from '@/components/common/dashboards/CompassBoardX';
import SpeedBoard from '@/components/common/dashboards/SpeedBoard';
import TemperatureBoard from '@/components/common/dashboards/TemperatureBoard';
import PressureBoard from '@/components/common/dashboards/PressureBoard';
import LineChart from '@/components/common/templates/LineChart';
import SeaGroundDistanceChart from '@/components/common/charts/SeaGroundDistanceChart';
import SeaLevelDistanceChart from '@/components/common/charts/SeaLevelDistanceChart';
import ThrusterHori from '@/components/common/thrusters/ThrusterHori';
import ThrusterVert from '@/components/common/thrusters/ThrusterVert';
import model from '@/components/common/templates/model';
import OperatorPanel from '@/components/common/dashboards/OperatorPanel';
import CorrespondenceStatus from '@/components/common/status/CorrespondenceStatus';
import videoConnect from '@/components/common/templates/videoConnect';
import OperatorGuide from '@/components/common/dashboards/OperatorGuide';
import DataSimpl from '@/components/common/status/DataSimpl';

export default {
    name: 'GameModeDash',
    data() {
        return {
            alter: '0'
        };
    },
    components: {
        CompassBoard,
        SpeedBoard,
        TemperatureBoard,
        PressureBoard,
        SeaGroundDistanceChart,
        SeaLevelDistanceChart,
        LineChart,
        ThrusterHori,
        ThrusterVert,
        model,
        OperatorPanel,
        CorrespondenceStatus,
        videoConnect,
        OperatorGuide,
        DataSimpl,
        SeaDistanceChart :() => import("@/components/common/charts/SeaDistanceChart"),
    },
    computed: {},
    created() {
        // var _this = this;
        // // 监听游戏手柄
        // window.addEventListener('gamepadconnected', function(e) {
        //     var gp = navigator.getGamepads()[e.gamepad.index];
        //     // console.log(gp);
        //     _this.startgamepad(); // 启动手柄
        // });
        // // 监听游戏手柄拔出
        // window.addEventListener('gamepaddisconnected', function(e) {
        //     clearInterval(_this.interval); // 停止获取手柄数据
        // });
    },
    methods: {
        // 启动手柄
        // startgamepad() {
        //     var _this = this;
        //     // 每200ms 获取一次手柄数据，查看是否按下手柄按键
        //     this.interval = setInterval(function() {
        //         var gamepad = navigator.getGamepads()[0];
        //         _this.pressKey(gamepad.buttons);
        //     }, 200);
        // },
        // // 手柄按键
        // pressKey(arr) {
        //     // console.log(arr);
        //     for (let i = 0; i < arr.length; i++) {
        //         if (arr[i].value === 1) {
        //             // 根据个人情况判断；不同手柄值不同。
        //             if (i === 8) {
        //                 this.vis = this.vis === false;
        //             }
        //         }
        //     }
        // }
    },
    mounted() {
    }
};
</script>

<style scoped>
.mgb20 {
    margin-bottom: 10px;
}

>>> * {
    /*text-shadow: 0 0 10px #24a3af, 0 0 20px #24a3af, 0 0 30px #24a3af, 0 0 40px #24a3af;*/
    /*color: white;*/
    background: transparent;
    color: #C0911F;
    font-size: 10px;
}

>>> .el-card__body {
    padding: 10px;
    border: none;
    /*border: 1px solid #C0911F;*/
}
>>> .el-card__header {
    padding: 10px;
    border: none;
    /*border: 1px solid #C0911F;*/
}
>>> .el-card {
    border: 3px solid #C0911F;
}

</style>
